<template>
  <div>
  <div v-if="!isShowPage">
    该用户无权限访问
  </div>
  <div class="app-container home" v-if="isShowPage">
    <!--<div class="mybanner">
      <div>
        <p>嵌入式测试仿真管理系统</p>
        <span>一款电子产品的板级嵌入式测试与诊断是提升产品的自诊断和自我维护能力、全面提高自身可靠性的有效解决方案。</span>
      </div>
    </div>-->
    <!--<el-row :gutter="20" class="margin_t20">
      <el-col :sm="24" :lg="24" >
        <div class="mybox_s" style="min-height:250px;">
          <p class="mytitle1"><i class="el-icon-info"></i> 系统信息</p>
          <ul class="mylist1">
            <li>整体系统基于CS的系统架构设计；</li>
            <li>制定CS的通讯协议；</li>
            <li>C端与S端通讯接口的安全性认证框架设计；</li>
            <li>系统集成八大模块软件协调管理；</li>
            <li>系统具良好拓展性、模块间低耦合、日志划分清晰、方便运维；</li>
        </ul>

          <br>

          <p>
            <b>当前版本:</b> <span>v{{ version }}</span>
          </p>
          <p>
            <el-tag type="danger">测试版本</el-tag>
          </p>
        </div>
      </el-col>

      &lt;!&ndash; <el-col :sm="24" :lg="12">
        <div class="mybox_s" style="min-height:250px;">
          <p class="mytitle1"><i class="el-icon-question"></i> 使用指引</p>
          <p>
            使用指引帮助您快速了解Edsta平台的使用，包括产品、设备的创建、数据转发和命令下发等操作。
          </p>
          <br>
          <h5>
            待更新
          </h5>
        </div>
      </el-col> &ndash;&gt;
    </el-row>-->
    <!-- <el-divider /> -->
    <!-- <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="mybox_s">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
                href="https://www.ceprei.com"
                target="_blank"
                >https://www.ceprei.com</el-link
              >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 邮箱：<a
                href="javascript:;"
                >XXX@ceprei.com</a
              >
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="mybox_s">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion style="position: relative;top: -21px;">
            <el-collapse-item title="V1.1.0 - 开发中">
              <ol>
                <li>设备管理页面列表布局调整</li>
                <li>支持Td时序数据库保存在线离线记录</li>
                <li>新增产品模型管理功能</li>
                <li>优化设备离线动作记录</li>
                <li>优化设备离线通知</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="V1.0.0 - 2021-10-01">
              <ol>
                <li>Edsta微服务系统正式发布</li>
                <li>设备管理页面功能开发</li>
                <li>支持设备注册定位功能（高德地图）</li>
                <li>新增MQTT鉴权功能</li>
                <li>MQTT集群支持</li>
                <li>优化设备注册功能</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row> -->
    <el-card class="box-card" style="margin-bottom: 20px;">
      <el-row :gutter="20">
      <el-col :span="6"><div class="data_box1"><span>{{nodeCount}}</span>个<p>节点总数</p></div></el-col>
      <el-col :span="6"><div class="data_box2"><span>{{busyCount}}</span>个<p>运行节点总数</p></div></el-col>
      <el-col :span="6"><div class="data_box3"><span>{{queueCount}}</span>个<p>排队任务总数</p></div></el-col>
      <el-col :span="6"><div class="data_box4"><span>{{taskCount}}</span>个<p>任务总数</p></div></el-col>
    </el-row>
    </el-card>


    <el-card class="box-card" style="margin-bottom: 10px;">
    <el-row class="data_table">
      <el-table :data="tableData" border style="width: 100%;padding: 0;" row-key="id" class="mydata1" >
  <el-table-column prop="name" label="模块名称" style="font-weight: bold!important;"  width="180">
    <template slot-scope="scope">
          <div  class="myModuleName">
            <i class="el-icon-cpu"></i>
            <b>{{GlobalVariable.getModuleType(scope.row.module)}}</b>
          </div>
        </template>
  </el-table-column>
  <el-table-column prop="allCount" label="节点总数" align="center" sortable ></el-table-column>
  <el-table-column prop="busyCount" label="运行节点总数" align="center"></el-table-column>
  <el-table-column prop="queueCount" label="排队任务数量" align="center"></el-table-column>
  <el-table-column label="总任务数量" align="center">
    <template slot-scope="scope">
      <b>{{scope.row.busyCount + scope.row.queueCount}}</b>
    </template>
  </el-table-column>
  <el-table-column  prop="name" label="详情"  width="100" type="expand">
   <template #default="props">
      <el-table :data="props.row.serverList" border style="width: 100%;" slot="reference"  stripe class="mydata2" >
        <el-table-column prop="IP" label="IP">
        <template slot-scope="scope">
          <i class="el-icon-location" style="color: #545a72;"></i><span>{{ scope.row.solverInfo.ip}}</span>
        </template>
      </el-table-column>
        <el-table-column prop="port" label="端口">
          <template slot-scope="scope">
            <i class="el-icon-location" style="color: #545a72;"></i><span>{{ scope.row.solverInfo.port}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="workingState" label="是否空闲" align="center">
          <template slot-scope="scope">
          <span :class="scope.row.workingState=='FREE'?'icon_color1':'icon_color2'">
            <svg v-if="scope.row.workingState=='FREE'"  aria-hidden="true" class="my-icon my-icon-color2"><use  xlink:href="#icon-free"></use></svg>
            <svg v-else  aria-hidden="true" class="my-icon my-icon-color1"><use  xlink:href="#icon-busy"></use></svg>
            {{ GlobalVariable.getServerWorkStateType(scope.row.workingState) }}
          </span>
        </template>
        </el-table-column>
        <el-table-column prop="availableState" label="是否可用" align="center">
          <template slot-scope="scope">
          <span :class="scope.row.availableState=='YES'?'icon_color1':'icon_color2'"><i :class="scope.row.availableState=='YES'?'el-icon-success':'el-icon-error'"></i>{{ GlobalVariable.getServerAvailableStateType(scope.row.availableState) }}</span>
        </template>
        </el-table-column>
        <el-table-column prop="availableTime" label="状态时间" align="center">
          <template slot-scope="scope">
            <span >{{ formatDate(scope.row.availableTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
</el-table>


    </el-row>
  </el-card>

    <el-row>
      <el-col :span="12"><access-count style="margin-top: 10px"/></el-col>
      <el-col :span="12"><oper-count style="margin-top: 10px;margin-left: 10px"/></el-col>
    </el-row>

  </div>
  </div>
</template>

<script>
import AccessCount from '@/components/Home/AccessCount/index'
import OperCount from '@/components/Home/OperCount/index'

import axios from 'axios'

export default {
  //自定义图标

  name: "Index",
  components: { OperCount, AccessCount},
  data() {
    return {
      // 版本号
      version: "0.9.0",
      // 节点总数
      nodeCount: 0,
      // 运行节点总数
      busyCount: 0,
      // 排队任务总数
      queueCount: 0,
      // 任务总数
      taskCount: 0,

      //统计表格
      // tableData: [{
      //     id: 1,
      //     name: '多物理仿真',
      //     nodes: '4',
      //     running: '4',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 31,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 32,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }, {
      //         id: 33,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 2,
      //     name: '可靠性预计',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 34,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 35,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 3,
      //     name: 'CAE求解器',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 36,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 37,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 4,
      //     name: '高速信号分析',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 38,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 39,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 5,
      //     name: '诊断预测算法生成',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 40,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 41,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 6,
      //     name: '驱动程序参数化',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 42,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 43,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 7,
      //     name: '电路生成专家系统',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 44,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 45,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   },{
      //     id: 8,
      //     name: ' 可靠性预计',
      //     nodes: '5',
      //     running: '8',
      //     queue: '10',
      //     totalTask: '360',
      //     children: [{
      //         id: 46,
      //         IP: '192.168.1.25',
      //         stataFree: '繁忙',
      //         stataAvailable: '不可用',
      //         stataTime: '2023-12-1 12:00:00',
      //       }, {
      //         id: 47,
      //         IP: '192.168.1.25',
      //         stataFree: '空闲',
      //         stataAvailable: '可用',
      //         stataTime: '2023-12-1 12:00:00',
      //     }]
      //   }],


      tableData:[],

      isShowPage:false,
    };
  },
  mounted(){
    this.isShowPage = (this.$store.getters.userType === '00')
  },

  beforeCreate() {
    // 测试，获取节点数据，后面改到request.js请求
    axios.get('/monitor/all')
      .then(response => {
        const data = response.data;
        console.log(data);
        this.tableData = data
        //这样就可以拿到promise里的数据，都要做这样的一个处理，否则是一个promise对象。

        for (let i = 0; i < this.tableData.length; i++){
          this.tableData[i].id = i
          this.nodeCount = this.nodeCount + this.tableData[i].allCount;
          this.busyCount = this.busyCount + this.tableData[i].busyCount;
          this.queueCount = this.queueCount + this.tableData[i].queueCount;
          this.taskCount = this.taskCount + this.tableData[i].busyCount + this.tableData[i].queueCount;
        }

      });

  },

  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    formatDate(cellValue) {
      if (cellValue == null || cellValue == "") return "";  //空值直接返回空
      var date = new Date(cellValue)
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
  },

};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.my-icon {
    width: 1em;
    height: 1em;
  }
.my-icon-color1{
  fill: #fe754b;
}
.my-icon-color2{
  fill: #41c363;
}

</style>

